<template>
  <el-card style="height: 100%; background-color: #e9e9e9">
    <router-view v-slot="{ Component }">
      <transition name="fade">
        <component :is="Component" v-if="flag" :isCollapse="isCollapsed" />
      </transition>
    </router-view>
  </el-card>
</template>

<script lang="ts">
export default {
  name: 'Main',
  props: {
    isCollapsed: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      flag: true,
      isCollapse: false
    };
  },
  created() {
    this.isCollapse = this.isCollapsed;
  }
};
</script>
<style lang="scss" scoped>
.fade-enter-from {
  opacity: 0;
}

.fade-enter-active {
  transition: all 0.3s;
}

.fade-enter-to {
  opacity: 1;
}

:deep .el-card__body {
  height: 100%;
  padding: 0px 6px 20px 10px;
}
</style>
